<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS选择符与继承</title>

    <script src="../../js/jquery-latest.js"></script>

    <style type="text/css">
        a:active{
            background-color: blue;
        }
/*        a:focus{
            background-color: blue;
        }

        a:visited{
            background-color: blue;
        }*/

        .testforbc{
            /*background-color: blue;*/
            /*border: 2px solid red;*/
        }

        .testforbc div:first-child{
            border: 2px solid red;
            /*background-color: red;*/
        }

        .list-item a{
            display: list-item;
        }
    </style>
</head>
<body>

<div class="list-item">
    <a href="test.html">test</a>
    <a href="test.html">test</a>
    <a href="test.html">test</a>
</div>

<div class="testforbc">
    <div>
        <span>child has bc</span>
    </div>
    <br />
    <span>child</span>
</div>


<h1>Inline Box</h1>
<div class="container">
    <span class="default">Before</span>
    <span class="box">&larr; left &nbsp;&uarr;up&nbsp;&rarr;right&nbsp;&darr;</span>
    <span class="default">After</span>
</div>

<style type="text/css">

    .box{
        display: inline;
        line-height: 100px;
        margin: 0 100px;
        padding: 20px 120px;
        border-top: 5px solid gray;
        border-right: 5px solid black;
        border-bottom: 5px solid black;
        border-left: 5px solid gray;
        background-color: gold;
    }

    .box2{
        display: inline;
        line-height: 100px;
        margin: 0 100px;
        padding: 20px 120px;
        background-color: gold;
    }
</style>

<script>
    $('body .box').hover(function(){
        this.className = "box2";
    }, function(){
        this.className = "box";
    })
</script>


<h1>Inline-block box</h1>

<div class="container">
    <span class="default">Before</span>
    <img class="replaced-box" src="./imgs/star.png" art="star" />
    <span class="default">After</span>

    <span class="default">Before</span>
    <span class="inline-box">Inline element displayed as an inline block.</span>
    <span class="default">After</span>
</div>

<style type="text/css">
    .replaced-box{
        display: inline-block;
        overflow: visible;
        width: 51px;
        height: 52px;
        margin: 10px 100px;
        padding: 10px 120px;
        border-top: 5px solid gray;
        border-right: 5px solid black;
        border-bottom: 5px solid black;
        border-left: 5px solid gray;
        background-color: gold;
    }
    .inline-box{
        display: inline-block;
        overflow: visible;
        width: 275px;
        height: 52px;
        margin: 10px 100px;
        padding: 10px 10px;
        border-top: 5px solid gray;
        border-right: 5px solid black;
        border-bottom: 5px solid black;
        border-left: 5px solid gray;
        background-color: gold;
    }
</style>

<h1>Block box</h1>

<div class="container block">
    <span class="default">Before</span>
    <span class="block-box">&uarr;<br />Top<br />&larr;Left&nbsp;&nbsp;&nbsp;Right&rarr;<br />Bottom<br />&darr;</span>
    <span class="default">After</span>
</div>

<style type="text/css">
    .container.block{
        text-align: center;
    }

    .block-box{
        display: block;
        overflow: auto;
        width: 220px;
        height: 100px;
        margin: 10px auto;
        padding: 10px;
        border-top: 5px solid gray;
        border-right: 5px solid black;
        border-bottom: 5px solid black;
        border-left: 5px solid gray;
        background-color: gold;
    }
</style>

<h1>Table box</h1>

<div class="container">
    <table><tr><td>Before</td></tr></table>
    <table class="table">
        <tr>
            <td class="cell">cell</td>
        </tr>
        <tr>
            <td class="cell">cell</td>
        </tr>
    </table>
    <table><tr><td>After</td></tr></table>
</div>

<style type="text/css">
    .table, .cell{
        border-top: 5px solid gray;
        border-right: 5px solid black;
        border-bottom: 5px solid black;
        border-left: 5px solid gray;
        background-color: gold;
    }


    .table{
        border-collapse: separate;
        table-layout: auto;
        visibility: visible;
        width: auto;
        height: auto;
        margin: 30px 50px;

        border-top: 5px solid gray;
        border-right: 5px solid black;
        border-bottom: 5px solid black;
        border-left: 5px solid gray;
        background-color: gold;
    }
    .cell{
        width: auto;
        height: auto;
        padding: 20px 50px;
        overflow: hidden;
    }
</style>

</body>
</html>